<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js数组之查找元素</title>
</head>
<body>
  <ul>
    <li>可利用indexOf从数组开始或指定位置中查找指定的元素，如找到则返回该元素对应的索引，没找到返回-1</li>
    <li>可利用lastIndexOf从数组结尾或指定位置中查找指定的元素，如找到则返回该元素对应的索引，没找到返回-1</li>
    <li>可利用includes查找数组中是否包含指定元素，如找到则返回true，没找到返回false</li>
    <li>可利用find查找数组是否包含指定元素，如找到返回当前元素，没找到返回undefined，适合于引用类型查找</li>
    <li>可利用findIndex查找数组是否包含指定元素，如找到返回当前元素的索引，没找到返回-1，适合于引用类型查找</li>
  </ul>
  <script>
    const arr = [1, 2, 3, 4, 5, 2, 6]
    console.log(arr.indexOf(2))         // 1
    console.log(arr.indexOf(2, 2))      // 5
    console.log(arr.lastIndexOf(2))     // 5
    console.log(arr.lastIndexOf(2, -3)) // 1
    console.log(arr.indexOf(2) !== -1)  // true
    console.log(arr.includes(2))        // true
    // 自定义includes
    function includes(arr, val) {
      for (const item of arr) {
        if (item === val) return true
      }
      return false
    }
    console.log(includes(arr, 2))      // true
    console.log(includes(arr, 8))      // false
    const users = [{ name: 'Miracle' }, { name: 'Jack' }, { name: 'Tom' }]
    console.log(users.find(item => item.name === 'Miracle'))       // { name: 'Miracle' }
    console.log(users.findIndex(item => item.name === 'Miracle'))  // 0
    // 自定义find
    function find(arr, func) {
      for (const item of arr) {
        if (func(item)) return item
      }
      return undefined
    }
    // 利用原型自定义find
    Array.prototype.find = function (func) {
      for (const item of this) {
        if (func(item)) return item
      }
      return undefined
    }
    console.log(find(users, item => item.name === 'Miracle'))       // { name: 'Miracle' }
    console.log(users.find(item => item.name === 'Miracle'))        // { name: 'Miracle' }
  </script>
</body>
</html>